/**
*@author       wuwg
*@createTime        2018/03/20
*CreateTime 		2018-01-21
*upDateTime 		2018-06-03
*/
@import '../../../config/config.less';

@css-prefix-tree : ~"@{css-prefix}tree";
@css-prefix-tree-node : ~"@{css-prefix-tree}-node";
/******************************************************************************************************************************\

                                                 fd-nav-tree-default

\******************************************************************************************************************************/
.@{css-prefix-tree} {
  position: relative;
  z-index: 1;
  cursor: default;
  color: @text-color;
  min-height: 300px;
  max-height: 400px;
  overflow: auto;
  border: 1px solid @input-border-color;
  background: @color-white;

  // 树的外围
  &-wrap{
    position: relative;
    width: 100%;
  }

  // 空数据,数据加载中
  &-empty ,
  &-loading >div{
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 100%;
    text-align: center;
    font-size: @font-size-base;
    color: @text-color;
    line-height: 1em;
    transform: translate(0,-50%);
  }
  //数据加载中
  &-loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    background-color: rgba(255,255,255,0.2);
  }

  &-drag-preview{
    /*必须是absolute定位，相对body*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 0;
    height: 0;
    font: 0/0 SimSun;
    text-indent: -9999em;
    /*隐藏元素占据位置*/
    visibility: hidden;
  }

  &-drag-line{
    display: none;
    /*必须是fixed定位,相对屏幕*/
    position: fixed;
    top: 0;
    left: 150px;
    z-index: 99;
    width: 100px;
    height: 2px;
    font: 0/0 SimSun;
    text-indent: -9999em;
    background-color: @primary-color;
  }

  &-drag-content{
    display: none;
    /*必须是absolute定位，相对body*/
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    padding: 0 5px;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    font: 13px/30px "Microsoft Yahei";
    border: 1px solid @input-border-color;
    background-color:  @color-white;
  }

  &-search {
    position: relative;
    z-index: 9;
    margin-bottom: 5px;
  }
  &-operate {
    margin-bottom: 5px;
    .@{css-prefix-tree}-btn-icon {
      padding: 0 7px;
      font-size: 16px;
    }
  }

  // 树节点
  .@{css-prefix-tree-node} {
    list-style: none;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    &.is-dragging {
      &-hd {
        cursor: move;
        pointer-events: none;
      }
    }
  }
  //  树节点头部
  .@{css-prefix-tree-node}-hd {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    color: @tree-text-color;
    font-size: @font-size-base;
    line-height: 20px;
    font-weight: normal;
    font-family: "Microsoft Yahei";
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    text-decoration: none;
    //border: 1px solid #000;
    transition: background-color 0.3s 0s linear;
    /*** warning ***/
    &.warning {
      background-color:  tint(@warning-color, 90%);
    }
    //hover
    &:hover {
      background-color:  tint(@primary-color, 90%);
    }
    /***active ***/
    &.active,
    &.active&:hover {
      background-color:  tint(@primary-color, 80%);
    }
    /**
     *@updateTime 2018-05-15
     *@description  获得焦点
     */
    &.isFocus {
      box-shadow: inset 0 0 0 1px #ff6600;
    }
    &.select {
      .@{css-prefix-tree-node}-name {
        color: #fff;
        background-color: @primary-color;
      }
    }

    em {
      color: @warning-color;
      font-style: normal;
    }
    //禁用
    &.disabled {
      cursor: not-allowed;
      // 不是触发按钮
      >*:not(.@{css-prefix-tree-node}-trigger){
        opacity: 0.5;
      }
    }
  }

  //  loading-icon
  .@{css-prefix-tree-node}-loading{
    display: none;
    position: absolute;
    left: 30px;
    top: 50%;
    z-index: 999;
    margin-left: -20px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    &.show {
      display: block;
    }
  }

  //  trigger
  .@{css-prefix-tree-node}-trigger{
    display: block;
    position: absolute;
    left: 30px;
    top: 50%;
    z-index: 9;
    margin-left: -16px;
    margin-top: -9px;
    width: 20px;
    height: 20px;
    font: 0/0 simSun;
    text-indent: -9999em;
    cursor: pointer;
    // 隐藏
    &.hide {
      display: none;
    }

    >span{
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      margin-top: -6px;
      margin-left: -7px;
      width: @icon-width;
      height: @icon-width;
      outline: @tree-icon-outline;
      border: @tree-icon-border;
      border-radius: @tree-icon-radius;
      &:after ,
      &:before {
        content:"";
        position: absolute;
        z-index: 1;
        background-color:tint(@text-color,30%);
      }

      &:after {
        top: @tree-icon-top;
        left: 2px;
        width: 7px;
        height: 1px;
      }

      &:before {
        top: 2px;
        left: 5px;
        height: 7px;
        width: 1px;
      }
    }

    &.fd-hide {
      display: none;
    }
  }
  // 展开状态下的 trigger
  .@{css-prefix-tree-node}-hd.extend > .@{css-prefix-tree-node}-trigger>span:before{
    display: none;
  }


  .@{css-prefix-tree-node}-checkbox,
  .@{css-prefix-tree-node}-icon,
  .@{css-prefix-tree-node}-input,
  .@{css-prefix-tree-node}-name {
    float: left;
    margin-left: 5px;
    margin-right: 0;
  }
  // 复选框
  .@{css-prefix-tree-node}-checkbox {
    position: relative;
    z-index: 1;
    overflow: hidden;
    // 复选框
    input[type="checkbox"]{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      font: 0/0 SimSun;
      cursor: pointer;
      opacity: 0;
      // 禁用
      &[disabled]{
        cursor: @cursor-disabled;
      }
      // 模拟的复选框
      & + span{
        position: relative;
        z-index: 1;
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: middle;
        border: 1px solid #dddee1;
        border-radius: 2px;
        background-color: #fff;
        transition:
        border-color @transition-time @ease-in-out,
        background-color @transition-time @ease-in-out,
        box-shadow @transition-time @ease-in-out;

        &:after {
          content: '';
          width: 4px;
          height: 8px;
          position: absolute;
          top: 1px;
          left: 4px;
          border: 2px solid #fff;
          border-top: 0;
          border-left: 0;
          -webkit-transform: rotate(45deg) scale(0);
          transform: rotate(45deg) scale(0);
          -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
        }
      }

      // 模拟的复选框
      &:checked + span{
        border-color: @primary-color;
        background-color: @primary-color;
        &:after {
          content: '';
          display: table;
          width: 4px;
          height: 8px;
          position: absolute;
          top: 1px;
          left: 4px;
          border: 2px solid #fff;
          border-top: 0;
          border-left: 0;
          transform: rotate(45deg) scale(1);
          transition: all @transition-time @ease-in-out;
        }
      }
    }
  }

  /**图标容器**/
  .@{css-prefix-tree-node}-icon {
    position: relative;
    z-index: 1;
    width:20px;
    height:20px;
    cursor: default;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    &:after ,
    &:before {
      display: none;
      content:"";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    &:after {
      border: 1px solid #ddd;
    }
    &:before {
      content:"+";
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      line-height: 18px;
      font-size: 18px;
      opacity: 0.5;
      text-align: center;
    }
    >img {
      position: relative;
      z-index: 2;
      float: left;
      width: 100%;
      height: 100%;
      font: 0/0 SimSun;
      text-indent: -9999em;
    }

    // 图标加载出错的样式
    &-error {
      &:after ,
      &:before{
        display: block;
      }
      >img {
        display: none;
      }
    }
  }

  .@{css-prefix-tree-node}-input {
    display: none;
    padding: 0 3px;
    width: 80%;
    min-width: 100px;
    height: 20px;
    overflow: hidden;
    color: @tree-text-color;
    font-size: @font-size-base;
    line-height: 18px;
    font-family: "Microsoft Yahei";
    border: 1px solid @input-border-color;
    border-radius: @btn-border-radius-small;
    transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
    cursor: text;
    outline:none;
    &.show {
      display: block;
    }
    &:focus {
      border-color:   tint(@input-hover-border-color, 20%);
      box-shadow: 0 0 0 2px fade(@input-hover-border-color, 20%);
    }
  }
  /**名称**/
  .@{css-prefix-tree-node}-name {
    position: relative;
    z-index: 1;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    //border: 1px solid red;
    &.hide {
      display: none;
    }
  }

  /***标题 end*****/
  @distance:5;
  @increment:22px;
  .add-level(@index , @class) when ( @index < 10 ){
    >.@{class}{
      //标题
      //  树节点头部
      >.@{css-prefix-tree-node}-hd {
        padding-left:@distance+@increment*@index;
        // trigger
        >.@{css-prefix-tree-node}-trigger ,
          // 加载图标
        >.@{css-prefix-tree-node}-loading {
          left:@distance+@increment*@index;
        }
      }
    }
    @add: ~"@{class} >.@{css-prefix-tree}-node-content >.@{css-prefix-tree-node}";
    // 自己调用自己
    .add-level(@index+1, @add)
  }
  .add-level(1,  @css-prefix-tree-node);

  // trigger 图标
  &.arrow .@{css-prefix-tree-node}-trigger{

  }
}


